<template>
    <div>
        <vue-move-tags :tag-list="tagList" size="small" :options="options"
                       @get-move-tags-event="getMoveTagsEvent"></vue-move-tags>
        <!--<div>-->
            <!--姓名:{{person.name}}<br/>年龄:{{person.value}}-->
        <!--</div>-->
    </div>
</template>

<script>
    export default {
        name: "test",
        data() {
            return {
                tagList: [{
                    name: "张程",
                    value: "22"
                }, {
                    name: "小米",
                    value: "32"
                }, {
                    name: "华为",
                    value: "33"
                }, {
                    name: "中兴",
                    value: "21"
                }, {
                    name: "联想",
                    value: "21"
                }, {
                    name: "酷睿",
                    value: "21"
                }, {
                    name: "阿里巴巴",
                    value: "21"
                }],
                //配置项
                options: {
                    //默认选中第index个
                    defaultSelect: 1,
                    //需要显示的属性名，默认name
                    //FIXME 为空的时候应该有默认值name
                    showName: "name",
                    //左按钮颜色
                    leftBtnColor: "",
                    //右按钮颜色
                    rightBtnColor: "",
                    //背景颜色
                    tagsColor: "",
                    //单项item颜色
                    tagsItemColor: "",
                    //单项item悬浮Hover时的颜色
                    tagsItemHover:"",
                    //单项item悬浮Hover时文字的颜色
                    tagsItemHoverTextColor:"",
                    //单项item选中颜色
                    tagsChooseItemColor: "",
                    //单项item文字颜色
                    tagsItemTextColor: "",
                    //单项item文字选中颜色
                    tagsChooseItemTextColor: "",
                    //单项item文字字体
                    tagsItemFamily: "黑体",
                },
                person: {}
            }
        },
        methods: {
            getMoveTagsEvent(e) {
                this.person = e;
            }
        }
    }
</script>

<style scoped>

</style>